<!DOCTYPE html>
<!-- saved from url=(0062)http://nkunited.de/jquery/plugins/waterrippleeffect/index.html -->
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<link rel="stylesheet" href="./css/index.css" />
	<title>HMIR运维管理系统</title>
	<script src="./js/jquery.min.js"></script>
	<script src="./js/jquery.waterrippleeffect.min.js"></script>

	<script>
		//------------------------------------------------------------------------
		function init () {
			//Settings - params for WaterRippleEffect
			var settings = {
				image: './image/bg.png',//image path
				rippleRadius: 3,//radius of the ripple
				width: 400,//width
				height: 200,//height
				delay: 1,//if auto param === true. 1 === 1 second delay for animation
				auto: true//if auto param === true, animation starts on it´s ownconta
			};

			//------------------------------------------------------------------------

			//standalone

			//init

			var waterRippleEffect = new WaterRippleEffect(document.getElementById('holder'), settings);
			document.getElementById('holder').style.cursor = 'pointer';

			//on click
			document.getElementById('holder').addEventListener('click', function (e) {
				var mouseX = e.clientX;
				var mouseY = e.clientY;
				waterRippleEffect.disturb(mouseX, mouseY);
			});




			//on mousemove
			document.getElementById('holder').addEventListener('mousemove', function (e) {
				var mouseX = e.clientX;
				var mouseY = e.clientY;
				waterRippleEffect.disturb(mouseX, mouseY);
			});
		};
	</script>
	<style type="text/css">
		#holder * {
			position: relative;
			left: 0;
			top: 0;
			bottom: 0;
			right: 0;
			margin: auto;
			z-index: -99;
			user-select: none;
			-moz-user-select: none;
			-webkit-user-select: none;
		}

		#content {
			position: absolute;
			left: 0;
			top: 0;
			bottom: 0;
			right: 0;
			margin: auto;
			z-index: 99;
		}

		body {
			margin: 0;
			overflow: hidden;
		}

		p {
			font-size: 16px;
		}

		.hmirClass h4 {
			display: inline-block;
			color: #bdcae9bf;
		}

		.hmirClass {
			position: absolute;
			font-size: 30px;
			width: 400px;
			height: 200px;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		#classLinx {
			display: inline-block;
			position: absolute;
			bottom: 10px;
			right: 10px;
			left: auto;
			top: auto;
			/* color: #9cafddbf; */
			color: #fff7;
			font-weight: 600;
		}
	</style>

</head>

<body onload="init()" id="holder">
	<div id="content">
		<div class="hmirClass">
			<h4 class="text-shadow-pop-right">欢迎使用 HMIR 运维系统</h4>
		</div>
		<div id="classLinx">Powered by Linx</div>
	</div>
</body>

</html>